<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <el-container class="first-container">
      <!--<editor-fold desc="数据汇总">-->
      <el-header class="header">
        <p class="title">
          <span class="line"></span>
          {{ $t('wms.materialInformations') }}</p>
        <div class="container-div">
          <p class="list-title"><span class="title-name">{{ $t('wms.materialBarcode') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.materialCode') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.materialName') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.materialSpce') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.unit') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.stockQty') }}</span>:</p>
          <p class="list-title"><span class="title-name">{{ $t('wms.currentStorageQty') }}</span>:</p>
        </div>
        <!-- card内容-->
      </el-header>
      <el-container class="second-container">
        <el-header class="second-header">
          <p class="title">
            <span class="line"></span>
            {{ $t('wms.currentInputQty') }}</p>
          <el-form :model="form" class="demo-form-inline" size="large">
            <el-form-item class="label" :label="$t('wms.barcodeNumber')">
              <el-input v-model="form.name" :placeholder="$t('wms.pleaseEnterThe')" style="font-size: 16px"/>
            </el-form-item>
          </el-form>
        </el-header>
        <el-button class="buttons" type="primary">{{ $t('wms.submit') }}</el-button>
      </el-container>
    </el-container>
    <!--提交的弹框-->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </ScaleBox>
</template>

<script setup>
// 引入组件，进去页面显示加载
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import config from '@/config'
import { selectWmsBarcodeInfoWms } from '@/api/mesApi'
import { onMounted, reactive, ref, watch } from 'vue'
import useI18n from '@/hooks/language'
import ScaleBox from 'vue3-scale-box'

const { t } = useI18n()

const data = reactive({
  ready: false,
  barcodeList: {}
})

const form = reactive({
  name: ''
})

onMounted(() => {
  data.ready = true
  selectBarcodeList()
})

const selectBarcodeList = () => {
  // 调用接口，查询条码信息
  selectWmsBarcodeInfoWms({
    receiptId: data.id,
    asnHId: data.id,
    barcode: 'DUSTCARD',
    selectType: 'salesOut',
    isFs: 1
  }).then(function (res) {
    console.log(res)
  })
}
</script>

<style scoped lang="scss">
@forward "index";

:deep .row-table-list {
  background-color: #e85757 !important;
}

body,
#app,
#dv-full-screen-container {
  background-color: #dee5f5
}
</style>
